<template>
  <div class="order-manage">
    <h2>{{ $route.name }}</h2>
    <el-card class="box-card">
      <OrderHead
        :getOrderList="getOrderList"
        :reqOrderInfo="reqOrderInfo"
      ></OrderHead>
      <OrderMain
        :resOrderInfo="resOrderInfo"
        :updateOrderInfo="updateOrderInfo"
        :getOrderDetailInfo="getOrderDetailInfo"
        :detailInfo="detailInfo"
        :reqOrderInfo="reqOrderInfo"
      ></OrderMain>
      <OrderFoot
        :reqOrderInfo="reqOrderInfo"
        :updatePageSize="updatePageSize"
        :changePage="changePage"
      ></OrderFoot>
    </el-card>
  </div>
</template>

<script>
import OrderFoot from '../../components/order/foot/OrderFoot.vue'
import OrderMain from '../../components/order/main/OrderMain.vue'
import OrderHead from '../../components/order/head/OrderHeader.vue'

import { orderList, updateOrder, getOrderDetail } from '@/req/orderAjax'
import { alterSuccess, alterError } from '@/util/msgTips'
import Vue from 'vue'
export default {
  provide: {},
  data: function () {
    return {
      // 请求信息
      reqOrderInfo: {
        orderNo: '',
        consignee: '',
        phone: '',
        orderState: '',
        date: '',
        total: 0,
        currentPage: 1,
        pageSize: 5
      },
      // 响应信息
      resOrderInfo: [
        {
          id: '',
          orderNo: '',
          orderTime: '',
          phone: '',
          consignee: '',
          deliverAddress: '',
          deliveryTime: '',
          remarks: '',
          orderAmount: '',
          orderState: '',
          flag: ''
        }
      ],
      // total: 0,
      isPage: true,
      // 详细信息
      detailInfo: {}
    }
  },
  components: {
    OrderFoot,
    OrderMain,
    OrderHead
  },
  methods: {
    // 修改订单信息
    async updateOrderInfo (data) {
      const { code, msg } = await updateOrder(data)
      if (code === 0) {
        alterSuccess(msg)
        // 刷新页面
      } else {
        alterError(msg || '修改失败')
      }
    },

    // 获取列表
    async getOrderList (info = this.reqOrderInfo, fl = this.isPage) {
      // true代表获取初始数据
      // 发送请求获取列表 默认只获取5条
      this.isPage = fl
      const { pageSize, currentPage } = info
      if (fl) {
        // 显示列表
        const { data, total } = await orderList({
          pageSize,
          currentPage
        })

        // this.total = total
        this.resOrderInfo = data
        this.reqOrderInfo.total = total
      } else {
        const { data, total } = await orderList({
          ...info
        })
        this.resOrderInfo = data
        this.reqOrderInfo.total = total
      }

      this.reqOrderInfo.pageSize = pageSize
      this.reqOrderInfo.currentPage = currentPage

      Vue.set(this.resOrderInfo, 'flag', false)
    },
    // 修改页面大小,
    updatePageSize (val) {
      // this.pageInfo.pageSize = val
      this.reqOrderInfo.pageSize = val
      this.getOrderList()
    },

    // 切换页面 判断是否是带搜索切换页面
    changePage (val) {
      this.reqOrderInfo.currentPage = val
      if (this.isPage) {
        this.getOrderList() // 正常显示
      } else {
        this.getOrderList(this.reqOrderInfo, false) // 根据查询显示
      }

      // 切换页面的情况, 1. 如果是已经搜索,点击分页需要带上查询参数,如果没有点击搜索,那么就不要带上查询参数,
      // 问题: 但是什么情况下显示的全部,什么情况下显示的是查询后的数据
    },

    // 获取详细
    async getOrderDetailInfo (id) {
      const { data } = await getOrderDetail(id)
      this.detailInfo = data
    }
  },
  // 初始化请求数据
  async created () {
    this.getOrderList()
  }
}
</script>

<style lang="less" scoped>
.order-manage {
  border-radius: 5px;
  padding-top: 30px;
  background-color: #fff;
  width: 100%;
  height: 100%;
}
.el-card {
  margin-top: 30px;
}
</style>
